<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-left"
      style="margin-right: 30px;position:absolute;right:0;ub main-center cross-center"
    >
      <el-breadcrumb-item :to="{ path: '/' }">领货管理</el-breadcrumb-item>

      <el-breadcrumb-item>库房管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 分栏布局 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <!-- 输入框 -->
          <el-input placeholder="请输入任务单号" v-model="input" clearable @clear="getMissionList"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button @click="getPickUpMessage(input)" type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="missionList" v-loading="loading" style="width: 100%" max-height="410" border>
        <!-- 展开列 -->
        <el-table-column type="expand" width="50%">
          <template slot-scope="scope">
            <el-col v-for="(item,index) in scope.row.goodsVoList" :key="index" class="shopMessage">
              <div>
                <p>商品单号：{{scope.row.goodsVoList[index].commodityId}}</p>
                <p>商品名称：{{scope.row.goodsVoList[index].productName}}</p>
                <p>商品数量：{{scope.row.goodsVoList[index].amountOfGoods}}</p>
              </div>
            </el-col>

            <v-row></v-row>
          </template>
        </el-table-column>
        <!-- 索引列 -->
        <!-- <el-table-column type="index" label="#" width="50"></el-table-column> -->
        <el-table-column prop="id" label="任务单号" width="130%"></el-table-column>

        <el-table-column prop="orderId" label="订单号" width="130%"></el-table-column>
        <el-table-column prop="clientId" label="客户单号" width="130%"></el-table-column>
        <el-table-column prop="userId" label="配送员代号" width="130%"></el-table-column>

        <!-- <el-table-column label="商品单号" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.goodsVoList[0].commodityId}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.goodsVoList[0].productName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsVoList.amountOfGoods" label="商品数量" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.goodsVoList[0].amountOfGoods}}</span>
          </template>
        </el-table-column>-->

        <el-table-column label="任务状态" width="130%">
          <template slot-scope="scope">
            <el-switch
              class="switch"
              v-model="scope.row.taskStatus"
              :active-value="0"
              :inactive-value="-1"
              active-color="#F04134"
              active-text="已领货"
              inactive-color="#00A854"
              inactive-text="未领货"
              width="72"
              disabled
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="servicetimeInformation" label="服务时间信息" width="141%"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150%"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="150%"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150%">
          <template slot-scope="scope">
            <!-- <el-button type="success" @click="watchRow(scope.row)" size="mini">查看</el-button> -->
            <el-button
              type="danger"
              @click="showEditDialog(scope.row)"
              :disabled="isBtnVisible(scope.row)"
              size="mini"
            >确认领货</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页的完整功能 -->
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        ></el-pagination>
      </div>

      <!-- 确认购货入库单的对话框 -->
      <el-dialog
        title="领货单"
        :visible.sync="updateDialogVisible"
        width="600px"
        @close="updateFormClosed"
      >
        <!-- 内容主题区域 -->
        <el-form
          :model="updateForm"
          :rules="updateFormRules"
          ref="updateFormRef"
          label-width="120px"
        >
          <!-- 内容左主题区域 -->
          <div class="dialog-left" style="width: 48%;float:left; margin-left:-10px;height:320px">
            <el-form-item label="任务单号:" prop="id">
              {{ updateForm.id }}
              <!-- <el-input v-model="updateForm.id" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="客户单号:" prop="clientId">
              {{ updateForm.clientId }}
              <!-- <el-input v-model="updateForm.clientId" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="配送员代号:" prop="userId">
              {{ updateForm.userId }}
              <!-- <el-input v-model="updateForm.userId" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="服务时间:" prop="servicetimeInformation">
              {{ updateForm.servicetimeInformation }}
              <!-- <el-input v-model="updateForm.servicetimeInformation" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="领货日期:" prop="dateTime">
              {{ updateForm.dateTime }}
              <!-- <el-input v-model="updateForm.dateTime" disabled></el-input> -->
            </el-form-item>
          </div>
          <!-- 内容右主题区域 -->
          <div class="dialog-right" style="width: 52%;float:right; margin-right:10px;height:320px">
            <el-scrollbar style="height:180px;" class="editScrollbar">
              <div
                v-for="(item,index) in updateForm.goodsVoList"
                :key="index"
                style="height:180px;"
              >
                <el-form-item label="商品单号:" prop>
                  {{ updateForm.goodsVoList[index].commodityId }}
                  <!-- <el-input v-model="updateForm.goodsVoList[index].commodityId" disabled></el-input> -->
                </el-form-item>
                <el-form-item label="商品名称:" prop>
                  {{ updateForm.goodsVoList[index].productName }}
                  <!-- <el-input v-model="updateForm.goodsVoList[index].productName" disabled></el-input> -->
                </el-form-item>
                <el-form-item label="商品数量:" prop>
                  {{ updateForm.goodsVoList[index].amountOfGoods }}
                  <!-- <el-input v-model="updateForm.goodsVoList[index].amountOfGoods" disabled></el-input> -->
                </el-form-item>
              </div>
            </el-scrollbar>

            <el-form-item label="领货人:" prop="name">
              <el-input v-model="updateForm.name"></el-input>
            </el-form-item>

            <el-form-item label="备注:" prop="remark">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="updateForm.remark"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <!-- 底部区域 -->
        <div slot="footer" class="dialog-footer" style="width:100%; float:none">
          <el-button @click="updateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateFormChange(updateForm)">确 定 领 货</el-button>
        </div>
      </el-dialog>

      <!-- 查看购货入库单的对话框 -->
      <el-dialog title="领货单" :visible.sync="watchDialogVisible" width="800px">
        <!-- 内容主题区域 -->
        <el-form :model="watchForm" label-width="120px">
          <!-- 内容左主题区域 -->
          <div class="dialog-left" style="width: 48%;float:left; margin-left:-10px;height:250px">
            <el-form-item label="任务单号:" prop>
              {{watchForm.id}}
              <!-- <el-input v-model="watchForm.id" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="客户单号:" prop>
              {{watchForm.clientId}}
              <!-- <el-input v-model="watchForm.clientId" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="配送员代号:" prop>
              {{watchForm.userId}}
              <!-- <el-input v-model="watchForm.userId" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="服务时间信息:" prop>
              {{watchForm.servicetimeInformation}}
              <!-- <el-input v-model="watchForm.servicetimeInformation" disabled></el-input> -->
            </el-form-item>
          </div>
          <!-- 内容右主题区域 -->
          <div class="dialog-right" style="width: 52%;float:right; margin-right:10px;height:250px">
            <el-scrollbar style="height:250px;">
              <span v-for="(item,index) in watchForm.goodsVoList" :key="index">
                <el-form-item label="商品单号:" prop>
                  {{watchForm.goodsVoList[index].commodityId}}
                  <!-- <el-input v-model="watchForm.goodsVoList[index].commodityId" disabled></el-input> -->
                </el-form-item>
                <el-form-item label="商品名称:" prop>
                  {{watchForm.goodsVoList[index].productName}}
                  <!-- <el-input v-model="watchForm.goodsVoList[index].productName" disabled></el-input> -->
                </el-form-item>
                <el-form-item label="商品数量:" prop>
                  {{watchForm.goodsVoList[index].amountOfGoods}}
                  <!-- <el-input v-model="watchForm.goodsVoList[index].amountOfGoods" disabled></el-input> -->
                </el-form-item>
              </span>
            </el-scrollbar>

            <!-- <el-form-item label="商品单号:" prop>
              <el-input v-model="watchForm.commodityId" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品名称:" prop>
              <el-input v-model="watchForm.productName" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品数量:" prop>
              <el-input v-model="watchForm.amountOfGoods" disabled></el-input>
            </el-form-item>-->
          </div>
        </el-form>
        <!-- 底部区域 -->
        <div slot="footer" class="dialog-footer" style="width:100%; float:none">
          <el-button type="primary" @click="watchDialogVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      currentTime: new Date(), // 获取当前时间
      loading: true,
      i: 0,
      // 获取任务单列表的参数对象
      queryInfo: {
        id: "",
        // 当前页数
        pageNum: 1,
        // 当前每页显示多少条数据
        pageSize: 5,
        sort: "",
        token: "",
      },
      // 获取确认领货对话框的参数对象
      queryInfoUpdate: {
        id: "",
        name: "",
        dateTime: "",
        remark: "",
      },
      // 任务单列表的数据
      missionList: [],
      // 任务单列表中商品的数据
      goodsVoList: [],
      // 表单的模拟数据
      tableData: [
        {
          id: 1001,
          user_id: "004",
          task_status: "-1",
          servicetime_information: "2020-8-2",
          remark: "",
          create_time: "2020-8-1",
          update_time: "2020-8-2",
        },
      ],
      total: 0,
      // 控制领货单的对话框的显示与隐藏
      updateDialogVisible: false,

      // 控制查看领货单的对话框的显示与隐藏
      watchDialogVisible: false,

      // 展示编辑领货单的对话框的相关数据
      updateForm: {
        id: 0,
        clientId: 0,
        userId: 0,
        servicetimeInformation: "",
        commodityId: 0,
        productName: "",
        amountOfGoods: 0,
        name: [],
        dateTime: "",
        remark: "",
      },

      // 展示查看领货单的对话框的相关数据
      watchForm: {
        id: 0,
        clientId: 0,
        userId: 0,
        servicetimeInformation: "",
        commodityId: 0,
        productName: "",
        amountOfGoods: 0,
        goodsVoList: [],
      },
      // 领货单的验证规则对象
      updateFormRules: {
        name: [{ required: true, message: "请输入领货人姓名" }],
      },
    };
  },
  created() {
    this.getMissionList();

    var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minutes = date.getMinutes();
    var second = date.getSeconds();
    _this.currentTime = //修改数据dateTime
      year +
      "-" +
      (month < 10 ? "0" + month : month) +
      "-" +
      (day < 10 ? "0" + day : day) +
      "" +
      " " +
      (hour < 10 ? "0" + hour : hour) +
      ":" +
      (minutes < 10 ? "0" + minutes : minutes) +
      ":" +
      (second < 10 ? "0" + second : second);
  },
  methods: {
    // 获取任务单列表的方法
    async getMissionList() {
      this.queryInfo.id = "";
      this.loading = true;
      const _this = this;
      const { data: res } = await _this.$http.get(
        "/api/warehouse/getMissionList",
        // {
        //   params: this.queryInfo
        // }
        this.queryInfo
      );
      if (res.code !== 200) {
        return _this.$message.error(res.msg);
      }
      console.log(res.code);

      _this.missionList = res.data;
      _this.total = res.total;
      this.loading = false;
      console.log(this.missionList);

      // console.log(this.goodsVoList)
      // console.log(_this.total);
    },

    // 返回查询结果
    async getPickUpMessage(input) {
      if (isNaN(input)) {
        return this.$message.error("只能输入数字");
      }

      if (Number(input) === 0) {
        this.missionList();
        return this.$message.success("所有数据获取成功");
      }

      this.queryInfo.id = input;
      this.loading = true;
      const { data: res } = await this.$http.get(
        "/api/warehouse/getMissionList",
        {
          params: this.queryInfo,
        }
      );
      if (res.code !== 200) {
        this.$message.error(res.msg);
      }
      this.missionList = [];
      this.missionList = res.data;
      this.loading = false;
      console.log(this.missionList);
      console.log(this.queryInfo);
      // console.log(this.input)
    },

    // 监听编辑领货任务单的对话框的关闭事件  关闭后重置输入框
    updateFormClosed() {
      this.$refs.updateFormRef.resetFields();
    },

    // 展示编辑任务单的对话框
    async showEditDialog(row) {
      this.updateDialogVisible = true;
      this.updateForm.id = row.id;
      this.updateForm.clientId = row.clientId;
      this.updateForm.userId = row.userId;
      this.updateForm.servicetimeInformation = row.servicetimeInformation;
      // this.updateForm.commodityId = row.goodsVoList[0].commodityId;
      // this.updateForm.productName = row.goodsVoList[0].productName;
      // this.updateForm.amountOfGoods = row.goodsVoList[0].amountOfGoods;
      this.updateForm.goodsVoList = row.goodsVoList;
      this.updateForm.dateTime = this.currentTime;
      this.updateForm.name = row.name;
      this.updateForm.remark = row.remark;
    },

    // 展示查看任务单的对话框
    async watchRow(row) {
      this.watchDialogVisible = true;
      this.watchForm.id = row.id;
      this.watchForm.clientId = row.clientId;
      this.watchForm.userId = row.userId;
      this.watchForm.servicetimeInformation = row.servicetimeInformation;
      // this.watchForm.commodityId = row.goodsVoList[0].commodityId;
      // this.watchForm.productName = row.goodsVoList[0].productName;
      // this.watchForm.amountOfGoods = row.goodsVoList[0].amountOfGoods;
      this.watchForm.goodsVoList = row.goodsVoList;
    },

    // 监听 pagesize 改变事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pageSize = newSize;
      this.getMissionList();
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pageNum = newPage;
      this.getMissionList();
    },

    // 确认领货按钮的触发事件
    async updateFormChange(updateForm) {
      this.queryInfoUpdate.id = updateForm.id;
      this.queryInfoUpdate.name = updateForm.name;
      this.queryInfoUpdate.dateTime = this.currentTime;
      this.queryInfoUpdate.remark = updateForm.remark;
      let form = {};
      form.name = this.queryInfoUpdate.name;
      form.dateTime = this.queryInfoUpdate.dateTime;
      form.remark = this.queryInfoUpdate.remark;
      console.log(this.queryInfoUpdate.id);

      const _this = this;
      const { data: res } = await _this.$http.post(
        "/api/warehouse/editPickupVo?id",
        this.queryInfoUpdate
      );
      console.log(this.queryInfoUpdate);
      if (res.code == 200) {
        _this.$message(res.msg);
      }
      if (res.code !== 200) {
        _this.$message.error(res.msg);
      }
      this.updateDialogVisible = false;
      this.getMissionList();
      console.log(this.missionList);
    },
    // 如果按钮需要被禁用，则返回true，否则返回false
    isBtnVisible(row) {
      // 当任务状态为已领货(0),则该按钮被禁用
      if (row.taskStatus == 0) {
        return true;
      }
      return false;
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-card {
  margin-top: 20px;
  height: 552px;
}
.el-breadcrumb {
  margin-top: -25px;
  margin-bottom: 10px;
}
// .el-pagination {
//   position: fixed;
//   bottom: 80px;
//   right: 40px;
// }
.shopMessage {
  width: 20%;
  // background: cadetblue;
  display: inline-block;
  border: 2px;
}
</style>